<template>
  <div class="tree-con">
    <ul class="treeUl treeUlHead">
      <li class="treeLi">
        <div class="liItem">菜单权限</div>
        <div class="liItem">操作权限</div>
      </li>
    </ul>
    <el-tree
      :data="tableData"
      node-key="id"
      :check-strictly="systemNodeFlag"
      default-expand-all
      :expand-on-click-node="false"
      highlight-current
      :props="{
        children: 'levelApplicationResponseVOS',
      }"
      ref="systemTree"
      show-checkbox
      @check="onCheck">
      <!-- :indent="0" show-checkbox -->
      <ul class="treeUl" slot-scope="{ node, data }">
        <li class="treeLi">
          <div class="liItem liItem1">
            <span>{{ data.appName }}{{ data.menuAliasName ? '（' + data.menuAliasName + '）' : '' }}</span>
          </div>
          <div class="liItem" :style="{ with: (node.level - 1) * 800 + 'px' }">
            <el-checkbox-group v-model="data.checkButton" @change="onItemCheckbox($event, data)">
              <el-checkbox :label="item.id" v-for="item in data.buttonList" :key="item.id" disabled>
                {{ item.appName }}{{ item.menuAliasName ? '（' + item.menuAliasName + '）' : '' }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </li>
      </ul>
    </el-tree>
  </div>
</template>

<script>
import { getMenuList } from '@api/modules/system.js'
export default {
  name: 'RoleMenuTree',
  components: {},
  emits: [],
  props: {
    /* 返回的数据 */
    menuIds: {
      type: Array,
    },
  },
  data() {
    return {
      tableData: [],
      systemNodeFlag: true,
    }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    // this.initdata()
  },
  methods: {
    /* 初始化数据 */
    initdata() {
      // console.log(this.tableData)
      if (this.tableData.length === 0) {
        this.getMenuList()
      } else {
        this.$nextTick(() => {
          this.$refs.systemTree.setCheckedKeys(this.menuIds) // 给树节点赋值
          this.systemNodeFlag = false // 重点： 赋值完成后 设置为false
          this.setName(this.tableData)
          this.getCheckedKeys()
          this.setDisabled(this.tableData)
        })
      }
    },
    /* 初始化菜单 */
    getMenuList() {
      getMenuList({ fieldName: '1', id: '' }).then(async res => {
        if (res.status === 200) {
          // this.tableData = res.data
          const list = await this.getList(res.data)
          this.tableData = list
          console.log('list :>> ', list)
          this.$nextTick(() => {
            this.$refs.systemTree.setCheckedKeys(this.menuIds) // 给树节点赋值
            this.systemNodeFlag = false // 重点： 赋值完成后 设置为false
            this.getCheckedKeys()
            this.setDisabled(this.tableData)
          })
        }
      })
    },
    /* 获取选中 */
    getCheckedKeys() {
      /* 获取选中的节点半选和全选 */
      const records = [...this.$refs.systemTree.getCheckedNodes(false, true)]
      // console.log(records)
      for (let i = 0; i < records.length; i++) {
        const item = records[i]
        if (item.buttonList.length > 0) {
          item.checkButton = []
          for (let j = 0; j < this.menuIds.length; j++) {
            const element = this.menuIds[j]
            for (let k = 0; k < item.buttonList.length; k++) {
              const button = item.buttonList[k]
              if (element === button.id) {
                item.checkButton.push(element)
              }
            }
          }
        }
      }
    },
    /* 监听checked */
    onCheck(node, checkedKeysList) {
      const nodeData = this.$refs.roleMenuTree.getNode(node.id)
      this.dealcheckButton(nodeData)
    },
    /* 处理选中菜单 */
    dealcheckButton(nodeData) {
      if (!nodeData.checked) {
        nodeData.data.checkButton = []
        nodeData.parent.data.checkButton = []
        if (nodeData.childNodes.length > 0) {
          for (let i = 0; i < nodeData.childNodes.length; i++) {
            const item = nodeData.childNodes[i]
            this.dealcheckButton(item)
          }
        }
      } else {
        nodeData.data.checkButton = nodeData.data.buttonList.map(item => {
          return item.id
        })
        if (nodeData.childNodes.length > 0) {
          for (let i = 0; i < nodeData.childNodes.length; i++) {
            const item = nodeData.childNodes[i]
            this.dealcheckButton(item)
          }
        }
      }
    },
    /* 监听checkbox */
    onItemCheckbox(e, row) {
      if (e.length !== 0) {
        this.$refs.roleMenuTree.setChecked(row, true, false)
      }
    },
    setDisabled(treeData) {
      treeData.forEach(item => {
        this.$set(item, 'disabled', true)
        if (item.levelApplicationResponseVOS) {
          this.setDisabled(item.levelApplicationResponseVOS)
        }
      })
    },
    /* 初始化tableData */
    setName(datas) {
      // 遍历树  获取id数组
      for (const i in datas) {
        datas[i].checkButton = []
        if (datas[i].levelApplicationResponseVOS) {
          // 存在子节点就递归
          this.setName(datas[i].levelApplicationResponseVOS)
        }
      }
    },
    getList(data) {
      data.forEach((item, idx) => {
        if (item.levelApplicationResponseVOS.length) {
          if (['效能监督APP', '机构效能'].includes(item.appName)) {
            data.splice(idx, 1)
          } else {
            this.getList(item.levelApplicationResponseVOS)
          }
        } else {
          if (['效能监督APP', '机构效能'].includes(item.appName)) {
            data.splice(idx, 1)
          }
        }
      })
      return data
    },
  },
}
</script>
<style lang="scss" scoped>
.tree-con {
  height: calc(100% - 39px);
  padding-right: 10px;
  padding-bottom: 20px;
}
.el-tree {
  border-bottom: 1px solid #e8eaec;
}
/deep/ .el-tree-node__content {
  height: auto;
  border-top: 1px solid #e8eaec;
  border-left: 1px solid #e8eaec;
  border-right: 1px solid #e8eaec;
}
.treeUlHead {
  background: #f0f4f9;
  border-top: 1px solid #e8eaec;
  border-left: 1px solid #e8eaec;
  position: sticky;
  top: -20px;
  z-index: 9;
  .liItem {
    border-right: 1px solid #e8eaec;
    color: #333;
    font-size: 14px;
    font-weight: 600;
  }
}
.treeUl {
  width: 100%;
  .treeLi {
    display: flex;
    width: 100%;
    white-space: pre-wrap;
    word-break: break-all;
    position: relative;
    .liItem {
      padding: 10px 5px;
      &:nth-child(1) {
        flex: 1;
      }
      &:nth-child(2) {
        width: 70%;
      }
      .checkBox {
        margin: 0 10px;
      }
      font-size: 14px;
      display: flex;
      width: 100%;
      .icon {
        color: #999;
        font-size: 16px;
        cursor: pointer;
      }
      &.liItem1 {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
